<template>
  <chart :options="options" :auto-resize="autoResize" :theme="theme" :watch-shallow="watchShallow"
      :class="className" :style="{height:height,width:width}"></chart>
</template>

<script>
import subatrApi from '@/api/kylin/substr'
const animationDuration = 2000

export default {
  props: {
    chartData: { type: Array },
    className: { type: String, default: 'chart' },
    theme: { type: String, default: 'macarons' },
    autoResize: { type: Boolean, default: true },
    watchShallow: { type: Boolean, default: true },
    width: { type: String, default: '100%' },
    height: { type: String, default: '230px' }
  },
  data() {
    return {
      options: this.buildOptions(this.charData)
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.options = this.buildOptions(val)
      }
    }
  },
  mounted() {
    if (!this.options && this.chartData) {
      this.options = this.buildOptions(this.chartData)
    }
  },
  methods: {
    buildOptions(chartData) {
      if (chartData === null) {
        chartData = {}
        chartData.category = []
        chartData.valueBeans = []
        chartData.originalDatas = []
      }
      if (!chartData) {
        return
      }
      var category = []
      var seriesData = []
      var seriesArea = {
        name: '大小',
        type: 'bar',
        data: [],
        itemStyle: {
          normal: {
            color: ['#409eff']
          }
        }
      }
      var seriesCount = {
        name: '查询次数',
        type: 'bar',
        data: [],
        itemStyle: {
          normal: {
            color: ['#8CC749']
          }
        }
      }

      for (var i = 0; i < chartData.length; i++) {
        category.push(chartData[i].name)
        seriesArea.data.push(chartData[i].size)
        seriesCount.data.push(0)
      }
      seriesData.push(seriesArea)
      seriesData.push(seriesCount)
      var legend = seriesData.map(item => {
        return item.name
      })
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b} <br/>{a0} : {c0} MB<br/>{a1} : {c1}次 '
          /* formatter: function(params) {
            return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value + 's'
          } */
        },
        legend: {
          data: legend
        },
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: category,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: function(value) {
              return subatrApi.subStr(value, 6) + '...'
            }
          }
        }],
        yAxis: [
          {
            type: 'value',
            name: '大小(MB)',
            min: 0,
            nameGap: 30,
            boundaryGap: ['20%', '20%'],
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
            nameLocation: 'center'
          },
          {
            type: 'value',
            name: '查询次数(次)',
            min: 0,
            nameGap: 5,
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false
            },
            nameLocation: 'center'
          }
        ],
        series: seriesData,
        animationDuration
      }
      /* [{
          name: 'pageA',
          type: 'bar',
          data: [79, 52, 200, 334, 390, 330, 220],
          animationDuration
        }] */
    }
  }
}
</script>
